<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>验证消费码</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	{js:jquery}
</head>

<body>
	<div class="container" style="min-width:450px;min-height:320px">
        <form>
    	    <div class="form-group">
    	        <label for="code"><h3>输入客户消费码</h3></label>
                <input type="text" class="form-control input-lg" id="code" onkeyup="getInfo();" onchange="getInfo();" style="letter-spacing:37px;font-size:20px;font-style: italic;" maxlength="8" AUTOCOMPLETE="off" />
                <p class="help-block">每次仅限一个消费码，输入后会验证显示信息</p>
    	    </div>

            <div class="form-group">
    	        <div class="alert alert-info" id="goodsInfo">待显示验证区域</div>
    	    </div>

    	    <div class="form-group">
                <input type="button" class="btn btn-warning btn-lg disabled" disabled="disabled" value="确认消费" onclick="checkCode();" id="checkButton" />
                <input type="button" class="btn btn-success btn-lg" value="刷新" onclick="window.location.reload();" />
    	    </div>
	    </form>
	</div>
</body>

<script>
//获取商品信息
function getInfo()
{
    var code = $('#code').val();
    if(code.length == 8)
    {
        $.getJSON("{url:/order/get_code_info_ajax}",{"code":code,"rand":Math.random()},function(json)
        {
            if(json.success == true)
            {
                $('#code').attr("disabled","disabled").addClass('disabled');
                $('#goodsInfo').removeClass('alert-danger alert-info').addClass('alert-warning');
                $('#goodsInfo').html("此消费码可用！【"+json.data['name']+" "+json.data['value']+"】 <br>点击 <确认消费> 进行核销");
                $('#checkButton').removeAttr('disabled').removeClass('disabled');
            }
            else
            {
                $('#goodsInfo').removeClass('alert-info').addClass('alert-danger');
                $('#goodsInfo').text(json.msg);
                $('#checkButton').attr('disabled','disabled').addClass('disabled');
            }
        });
    }
    else
    {
        $('#goodsInfo').removeClass('alert-danger').addClass('alert-info');
        $('#goodsInfo').text('待显示验证区域');
        $('#checkButton').attr('disabled','disabled').addClass('disabled');
    }
}

//验证消费码
function checkCode()
{
    $('#checkButton').attr('disabled','disabled').addClass('disabled');
    $('#checkButton').val("核销中...");

    var code = $('#code').val();
    $.getJSON("{url:/order/check_code_ajax}",{"code":code,"rand":Math.random()},function(json)
    {
        if(json.success == true)
        {
            $('#goodsInfo').removeClass('alert-warning alert-danger').addClass('alert-success');
            $('#goodsInfo').html("核销成功！【"+json.data['name']+" "+json.data['value']+"】 <br> 请为客户服务");
            $('#checkButton').hide();
        }
        else
        {
            $('#goodsInfo').removeClass('alert-warning alert-success').addClass('alert-danger');
            $('#goodsInfo').text(json.msg);
        }
    });
}
</script>
</html>
